<template>
	<base-page title="设置" navbarBgColor="white">
		<view>
			<view class="bg-default p-16 h-full">
				<view class="font-semibold h-20">账户设置</view>
				<view class="mt-8 radius-8 bg-white px-16 py-12">
					<view class="h-20 flex justify-between text-color-regular fs-14 font-normal" @click="openPwd">
						<text>登录密码</text>
						<view class="flex item-center">
							<text>去设置</text>
							<image class="size-20" src="@/static/svg/icon-arrow-right.svg"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="businessInfo" class="bg-default px-16 pb-16 h-full">
				<view class="font-semibold h-20">二维码海报</view>
				<view class="mt-8 radius-8 bg-white px-16 py-12">
					<view class="h-20 flex justify-between text-color-regular fs-14 font-normal">
						<text>使用自定义头像</text>
						<view class="flex item-center">
							<image v-if="businessInfo.posterShowAvatarState === 1" class="w-32 h-16" src="@/static/svg/switch-on.svg" @click="onSwitchClick(2)"></image>
							<image v-else class="w-32 h-16" src="@/static/svg/switch-default.svg" @click="onSwitchClick(1)"></image>
						</view>
					</view>
					<view class="tip">使用自己的头像生成分享海报</view>
				</view>
			</view>
			<view class="bg-default px-16 h-full">
				<view class="font-semibold h-20">关于我们</view>
				<view class="mt-8 radius-8 bg-white px-16 py-12">
					<view class="h-20 flex justify-between text-color-regular fs-14 font-normal" @click="toLink('user')">
						<text>用户协议</text>
						<image class="size-20" src="@/static/svg/icon-arrow-right.svg"></image>
					</view>
					<view class="h-20 flex justify-between text-color-regular fs-14 font-normal mt-16" @click="toLink('privacy')">
						<text>隐私条款</text>
						<image class="size-20" src="@/static/svg/icon-arrow-right.svg"></image>
					</view>
				</view>
			</view>
		</view>
		<template #footer>
			<view class="bg-default px-16 pb-16">
				<view v-if="userStore.isLogin" class="radius-8 border-primary h-46 flex center color-primary fs-16 leading-22" @click="toLogout">退出登录</view>
			</view>
		</template>
		<updatePwd ref="pwdInfo"></updatePwd>
	</base-page>
</template>

<script setup name="Settings">
	import {ref} from 'vue';
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import { useWebView } from '@/hooks/useWebView.js'
	import updatePwd from './components/updatePwd';
	import { updatePosterShowAvatarStateApi } from '@/api/auth.js'
	
	const userStore = useUserStore()
	const webview = useWebView()
	const pwdInfo = ref()
	const businessInfo = ref(userStore.userInfo.businessInfo)
	
	const openPwd = () => {
		pwdInfo.value.showPop(true)
	}
	
	const toLink = (type) => {
		if (type === 'user') {
			webview.showUserAgreement('用户协议')
		} else if (type === 'privacy') {
			webview.showPrivacyPolicy('隐私条款')
		}
	}
	
	const onSwitchClick = (val) => {
		uni.showLoading()
		updatePosterShowAvatarStateApi({posterShowAvatarState: val}).then(async res => {
			uni.hideLoading()
			uni.showToast({
				icon: 'none', 
				title: '设置成功'
			})
			await userStore.getUserInfo()
			businessInfo.value = userStore.userInfo.businessInfo
		}).catch(err => uni.hideLoading())
	}

	const toLogout = () => {
		uni.showModal({
			content: '确定要退出登录?',
			confirmColor: '#FA4543',
			cancelColor: '#333333',//色值要用16进制处理
			success: (res) => {
				if (res.confirm) {
					userStore.logout()
				}
			}
		})
	}
</script>
<style scoped lang="scss">
	.tip{
		font-size: 10px;
		color: rgba(51,51,51,0.6);
	}
</style>